/**
 * Author: ligj@mapbar.com
 * Create Time: 2018/01/09 16:41
 * Description:
 */
import {TAB_VIEW_REMOVE, TAB_VIEW_SET_TITLE, TAB_VIEW_CLOSE_CURRENT, TAB_VIEW_CLOSE_ALL, TAB_VIEW_CLOSE_PAGES} from '../store/mutations';
import Vue from "vue";

const UPDATE_PAGE = 'UPDATE_PAGE_TAB_VIEW';

Object.defineProperty(Vue.prototype, '$page', {
    get () {
        let $this = this;
        return {
            /**
             * 关闭当前打开的tab页
             * @param isForceClose [Boolean] 是否强制关闭页面，默认false
             */
            closeCurrent : (isForceClose = false)=>{
                this.$store.commit(TAB_VIEW_CLOSE_CURRENT);
                this.$fire(UPDATE_PAGE, isForceClose);
            },
            /**
             * 关闭所有页面
             * @param forceClosePages [Array<String>|String] 强制关闭的页面name
             */
            closeAll : (forceClosePages = [])=>{
                this.$store.commit(TAB_VIEW_CLOSE_ALL, forceClosePages);
                this.$fire(UPDATE_PAGE);
            },
            /**
             * 关闭指定页面
             * @param closePages [Array<String>|String] 需要关闭的页面name，不区分是否强制关闭
             */
            closePages : (closePages = [])=>{
                this.$store.commit(TAB_VIEW_CLOSE_PAGES, closePages);
                this.$fire(UPDATE_PAGE);
            },
            set title (val) {
                $this.$nextTick(() => {
                    $this.$store.commit(TAB_VIEW_SET_TITLE, {key : $this.$route.query['_'], title: val});
                });
            }
        }
    }
});

/**
 *
 * 1、 读取 url参数时，使用vm.$state  替换 vm.$route
 * 2、 在modal内部关闭modal，调用vm.$modal.close()
 */
export default {
    data() {
        return {
            // activeName:'ClassificationStatistics'
        }
    },
    mounted(){
        this.$bind(UPDATE_PAGE, () => {
            this.pushPage();
        });
    },
    methods: {
        pushPage(idx){
            idx = typeof idx === 'number' ? idx : this.pages.findIndex(item => item.query['_'] === this.activeName);
            if(idx > -1){
                this.$router.push({path: this.pages[idx].fullPath, query:this.pages[idx].query});
            } else {
                this.$router.push({path: '/UserList'});
            }
        },
        tabSelect(tab){
            this.pushPage(+tab.index);
        },
        tabClose(tabName){
            this.$store.commit(TAB_VIEW_REMOVE,{query: {'_':tabName}});
            this.pushPage();
        }
    },
    computed: {
        pages(){
            return this.$store.state.tabView.pages;
        },
        activeName(){
            return this.$store.state.tabView.currentPage + '';
        }
    },
    render() {
        return <el-tabs class="tab-view-pages"
                ref="tabs"
                value={this.activeName}
                on-tab-remove={this.tabClose.bind(this)}
                on-tab-click={this.tabSelect.bind(this)}
                type={'card'} closable={false}>
                    {this.$store.state.tabView.pages.map(item => {
                        let closable = item.meta.closable === false? false : true;
                        return <el-tab-pane closable={closable} label={item.title || item.meta.title || item.name} name={item.query['_']}>{this.activeName}</el-tab-pane>
                    })}
    </el-tabs>
    }
};
